<template>
  <a-layout class="layout">
    <a-layout-sider class="layout-aside" :style="siderStyle">
      <div class="aside-logo">LOGO</div>
      <a-menu
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
        :items="items"
      />
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="layout-header">
        <a-button @click="logout">退出登录</a-button>
      </a-layout-header>
      <a-layout-content class="layout-content"> </a-layout-content>
      <a-layout-footer :style="footerStyle">Footer</a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script setup>
//menu
import { h, ref } from "vue";
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";

const theme = ref("dark");
const selectedKeys = ref(["1"]);
const openKeys = ref(["sub1"]);
const items = ref([
  {
    key: "1",
    icon: () => h(MailOutlined),
    label: "Navigation One",
    title: "Navigation One",
  },
  {
    key: "2",
    icon: () => h(CalendarOutlined),
    label: "Navigation Two",
    title: "Navigation Two",
  },
  {
    key: "sub1",
    icon: () => h(AppstoreOutlined),
    label: "Navigation Three",
    title: "Navigation Three",
    children: [
      {
        key: "3",
        label: "Option 3",
        title: "Option 3",
      },
      {
        key: "4",
        label: "Option 4",
        title: "Option 4",
      },
      {
        key: "sub1-2",
        label: "Submenu",
        title: "Submenu",
        children: [
          {
            key: "5",
            label: "Option 5",
            title: "Option 5",
          },
          {
            key: "6",
            label: "Option 6",
            title: "Option 6",
          },
        ],
      },
    ],
  },
  {
    key: "sub2",
    icon: () => h(SettingOutlined),
    label: "Navigation Four",
    title: "Navigation Four",
    children: [
      {
        key: "7",
        label: "Option 7",
        title: "Option 7",
      },
      {
        key: "8",
        label: "Option 8",
        title: "Option 8",
      },
      {
        key: "9",
        label: "Option 9",
        title: "Option 9",
      },
      {
        key: "10",
        label: "Option 10",
        title: "Option 10",
      },
    ],
  },
]);

//退出登录
// import { message, Modal } from "ant-design-vue";
// import userUserStore from "@/store/user";
// const router = useRoute();
// const userStore = useUserStore();
// const logout = () => {
//   userStore.$reset();
//   message.success("退出成功");
//   router.push("/login");
// };
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { createVNode } from "vue";
import useUserStore from "../../store/user";
const router = useRouter();
const userStore = useUserStore();
const logout = () => {
  Modal.confirm({
    title: "温馨提示",
    icon: createVNode(ExclamationCircleOutlined),
    content: "您确定要退出？",
    okText: "确认",
    onOk() {
      userStore.$reset();
      message.success("退出成功");
      router.push("/login");
    },
    cancelText: "取消",
  });
};

//样式
const headerStyle = {
  textAlign: "center",
  color: "#fff",
  height: 64,
  paddingInline: 50,
  lineHeight: "64px",
  backgroundColor: "#7dbcea",
};
const contentStyle = {
  textAlign: "center",
  minHeight: 120,
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#108ee9",
};

const footerStyle = {
  textAlign: "center",
  color: "#fff",
  backgroundColor: "#7dbcea",
};
</script>
<style scoped>
.layout {
  height: 100vh;
}
.layout-header {
  background-color: #7dbcea;
  height: 64px;
}
.layout-content {
  overflow-y: auto;
  background-color: #3ba0e9;
}
.layout-aside {
  overflow-y: auto;
}
.aside-logo {
  line-height: 3;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
/* }深度控制css选择器  ant组件-menu的组件内又封装了组件，想要控制时，不写deep只能控制当前 深度选择控制组件内部的组件样式*/
:deep(.ant-menu .ant-menu-item) {
  border-radius: 0;
}
</style>
